import React, { useEffect } from "react";
import { connect } from "react-redux";
import { RecommendWrapper, SongsItem, SongsWrapper } from "./style";
import Title from "../../components/Title/title.jsx";
import MusicList from "../../components/MusicList/music-list.jsx";
import Footer from "../../components/Footer/footer.jsx";
import Loading from '../../components/Loading/loading.jsx'

import { getNewMusicAction, getRemdSongListAction } from "./store/action";

import { renderRoutes } from "react-router-config";

function Recommend(props) {
  const { newMusics, songList } = props.remdData;
  useEffect(() => {
    if (!newMusics.length && !songList.length) {
      props.getRemdSongListAction();
      props.getNewMusicAction();
    }
  }, [props, newMusics.length, songList.length]);
  const handleClick = id => {
    props.history.push(`/recommend/${id}`);
  };
  return (
    <RecommendWrapper className="toTop">
      <Title title="推荐歌单" />
      <SongsWrapper>
        {songList.map(item => (
          <SongsItem key={item.id} onClick={handleClick.bind(this, item.id)}>
            <div className="song-img">
              <img src={item.picUrl} alt={item.name} />
              <span className="num">{item.playCount}</span>
            </div>
            <p>{item.name}</p>
          </SongsItem>
        ))}
      </SongsWrapper>
      <Title title="最新音乐" />
      <MusicList list={newMusics}></MusicList>
      <Loading show={!newMusics.length || !songList.length} />
      <Footer />
      {renderRoutes(props.route.routes)}
    </RecommendWrapper>
  );
}

export default connect(state => ({ remdData: state.recommend }), {
  getNewMusicAction,
  getRemdSongListAction
})(React.memo(Recommend));
